<!--vue模板-->
<template>
  <div>
    <el-input class="toolbar" v-model="userne" placeholder="请输入员工名称" clearable  style="width: 250px;"/>
    <el-select class="toolbar" v-model="tmpdept" clearable placeholder="请选择部门" @change="chgs">
    <el-option v-for="item in deptoptions" :key="item.id"  :label="item.deptName" :value="item.id+'!'+item.deptNo+'!'+item.deptName" />
    </el-select>
    <el-select class="toolbar" v-model="tmpjob" clearable placeholder="请选择职位">
    <el-option v-for="item in joboptions" :key="item.id"  :label="item.name" :value="item.name" />
    </el-select>
    <el-select class="toolbar" v-model="ustatus" clearable placeholder="请选择状态">
    <el-option v-for="item in u" :key="item.id"  :label="item.name" :value="item.id" />
    </el-select>
    <el-button class="toolbar" type="primary" :icon="Search" @click="uquery">查询</el-button>
    <el-button class="toolbar" type="primary" :icon="Refresh" @click="rquery">重置</el-button>
  </div>
  <div>
    <el-button type="primary" class="toolbar" @click="saveupdate()" :icon="Plus">添加用户</el-button>
    <el-button type="danger" class="toolbar" @click="delIds()" :icon="Delete">批量删除</el-button>
  </div>
  <el-table :data="tableData" style="width: 100%"  border  @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="40"  align="center"/>
    <el-table-column label="序号" align="center" width="55" header-align="center" type="index" />
    <el-table-column prop="username" align="center" width="120" label="用户名" header-align="center" />
    <el-table-column prop="name" align="center" width="100" label="员工名称" header-align="center" />
    <el-table-column label="性别" align="center" width="60" header-align="center">
      <template v-slot="{ row }">
        <span v-if="row.gender === 1">男</span>
        <span v-else-if="row.gender === 2">女</span>
        <span v-else-if="row.gender === 3">保密</span>
      </template>
    </el-table-column>
    <el-table-column prop="dept.deptName" align="center" label="部门" width="120" header-align="center" />
    <el-table-column prop="job.name" label="职位" align="center" width="100" header-align="center" />
    <el-table-column label="状态" width="80" header-align="center">
      <template v-slot="{ row }">
        <el-switch v-model="row.status" class="mt-2" style="margin-left: 10px" inline-prompt :active-icon="Check" :inactive-icon="Close"  :active-value="1" :inactive-value="2" before-change="false" />
      </template>
    </el-table-column>
    <el-table-column prop="roles" label="创建人" align="center" width="80" header-align="center" />
    <el-table-column prop="createTime" label="创建时间" align="center" width="180" header-align="center" />
    <el-table-column prop="lastLoginDate" label="最后登录时间" align="center" width="180" header-align="center" />
    <el-table-column label="操作" header-align="center">
      <template v-slot="{ row }">
        <el-button type="primary" size="small" :icon="Edit" @click="saveupdate(row)">编辑</el-button>
        <el-button type="danger" size="small" :icon="Delete" @click="del(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="total,sizes,prev, pager, next" :total="total" :page-size="pageSize" class="page" :page-sizes="[5, 10, 20, 30, 40, 50]" @size-change="sizechg" @current-change="chg" />

  <!---添加或修改用户-->
    <SaveOrUpdate :visible="isshow" @close="clo"  @refreshData="initData" ref="saveOrUpdate"></SaveOrUpdate>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onMounted, watch } from "vue";
import axios from 'axios';
import { Check, Close, Delete, Edit, Message, Search, Star, Plus,Refresh } from '@element-plus/icons-vue';
import { queryUser, queryPage,delByIds,queryDepts,queryJob } from "@/utils/api";
import { ElMessage, ElMessageBox } from "element-plus";
import SaveOrUpdate from "./SaveOrUpdate.vue";

//显示保存对话框
const isshow =  ref(false);
const saveOrUpdate = ref(null);
function clo(f){
  isshow.value = f;
}

//保存与修改
function  saveupdate(data) {
  isshow.value=true;
  saveOrUpdate.value.init(data);
}
const deptoptions = ref([]);//部门列表
const joboptions = ref([]);//职位列表
const tmpdept =ref() ;//存储部门名称
const deptid =ref() ;//存储部门id
const tmpjob=ref(); //存储职位名称
const userne = ref();//存储用户名称
const u=[
  {id:1,name:"正常"},
  {id:2,name:"锁定"}
]
const ustatus = ref()
//表格数据
const tableData = ref([]);
const page = ref(1); //默认显示第一页
const pageSize = ref(5); //默认显示每页的记录数
const total = ref(0); //总记录数
const selectedIds = ref([]);
//请求用户列表
/* function initData() {
  axios.post("http://localhost:8080/api_v1.0/user/list", {})
    .then(res => {
      if (res.status == 200) {//http请求正确
        //获取接口返回数据 
        let rs = res.data;
        console.log(rs)
        //判断接口处理结果
        if (rs.code == 1) {
          //更新用户数据
          tableData.value = rs.data.rows;
          console.log(tableData.value)
        }
      }
    });
} */
async function initData() {
  let params = {
    page: page.value,
    pageSize: pageSize.value,
    name: userne.value,
    deptName:tmpdept.value,
    jobName:tmpjob.value,
    status: ustatus.value
    
  };
  console.log(params);
  const rs = await queryPage(params);
  console.log(rs);
  if (rs.code == 1) {
    tableData.value = rs.data.rows;
    total.value = rs.data.total;
    console.log("tableData:",tableData.value);
  }
};

//当前页变化
function chg(pg) {
  //更改当前页
  page.value = pg;
  //重写查询
  initData();
}

//每页记录数变化
function sizechg(pgsize) {
  //更改当前的记录数
  pageSize.value = pgsize;
  //从第一页开始查询
  page.value = 1;
  initData();
}

//删除用户是，提示消息框
function del(id){
  console.log(id);
  ElMessageBox.confirm("您确定要删除吗?","提示",{
    confirmButtonText:"确定",
    cancelButtonText:"取消",
    type:"warning",
  })
  .then(()=>{
    //确认删除
    todel(id);
  })
  .catch(()=>{});
}
//删除
function todel(id) {
  let ids = [id]
  let data = {}
  console.log(ids);
  delByIds(ids,data) 
  .then((res)=>{
    if(res.code == 1){
      ElMessage({
        message:"删除成功",
        type:"success",
      });
      //重新查询
      initData();
    }
  })
};

//复选框拿到id
const handleSelectionChange = (selection) =>{
  selectedIds.value = selection.map(item => item.id);
  console.log("选中的id:",selectedIds.value);
};

// watch(selectedIds,(newIds)=>{
//   //在这里对选中的行的id进行相应的操作
//   //列如存储到变量中，调用删除接口等
//   console.log(newIds)
// });
//批量删除
function delIds(){
    let ids = this.selectedIds;
    let data = {};
    console.log("要删除的id列表:", ids);
   ElMessageBox.confirm("您确定要删除吗?","提示",{
    confirmButtonText:"确定",
    cancelButtonText:"取消",
    type:"warning",
  })
  .then(()=>{
    //确认删除
  delByIds(ids,data) 
  .then((res)=>{
    if(res.code == 1){
      ElMessage({
        message:"删除成功",
        type:"success",
      });
      //重新查询
      initData();
    }
  });
  })
  .catch(()=>{});
   
  //清空选中的行
  this.selectedIds=[];

}
//查询部门
async function queryDept(){
    const res = await queryDepts();
    console.log("部门列表:",res);
    if(res.code == 1){
        deptoptions.value = res.data;
    }
}
//当部门发生变化的时
async function  chgs(dept) {
    let tmp = await dept.split("!");
    deptid.value = await tmp[0];
    //user.value.deptNo = await tmp[1];
    tmpdept.value = await tmp[2];
    console.log("部门id:和部门名称：",deptid.value,tmpdept.value);
    let params ={
        deptId: deptid.value
    };
    const res = await queryJob(params);
    console.log("对应的岗位:" ,res);
    if(res.code == 1){
        joboptions.value = res.data;
    }

}
//条件查询
async function uquery(){
  let params = {
    page: page.value,
    pageSize: pageSize.value,
     name: userne.value,
     deptName:tmpdept.value,
     jobName:tmpjob.value,
     status: ustatus.value
  };
  console.log("条件查询的条件",params);
  const rs = await queryPage(params);
  console.log(rs);
  if (rs.code == 1) {
    tableData.value = rs.data.rows;
    total.value = rs.data.total;
    console.log("条件查询放回数据",tableData.value);
  }
}

//重置按钮功能
function rquery () {
  userne.value='',
  tmpdept.value='',
  tmpjob.value='',
   ustatus.value=''
  initData();
}
/***********生命周期函数********** */
//在页面挂载完后  vue会执行该方法 
onMounted(() => {
  initData();
  queryDept();
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.toolbar {
  margin: 10px;
}

.page {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-right: 20px;
}
</style>
